﻿
@{
    ViewBag.Title = "Receiver";
}

<h2>Receiver</h2>

<p>This view subscribes to the WidgetHub</p>

<div>
    <span class="small-width bold">ID</span>
    <span class="medium-width bold">Color</span>
    <span class="medium-width bold">Shape</span>
</div>
<div data-bind="foreach: widgets">
    <div>
        <span data-bind="text: id" class="small-width"></span>
        <span data-bind="text: color" class="medium-width"></span>
        <span data-bind="text: shape" class="medium-width"></span>
    </div>
</div>

@section Scripts {
    <!-- Reference the autogenerated SignalR hub script -->
    <script src="~/signalr/hubs"></script>

    <script>

        var vm = null;

        $(function () {

            vm = new WidgetViewModel();
            ko.applyBindings(vm);

            var hub = $.connection.widgets;

            $.connection.hub.start();

            hub.client.newWidget = function (item) {
                var widget = new Widget(item.ID, item.Color, item.Shape);
                vm.addWidget(widget);
            };
        });

        function WidgetViewModel() {
            var self = this;
            self.widgets = ko.observableArray([]);

            self.addWidget = function (item) {
                self.widgets.push(item);
            };
        }

        var Widget = function (id, color, shape) {
            var self = this;
            self.id = ko.observable(id);
            self.color = ko.observable(color);
            self.shape = ko.observable(shape);
        };

    </script>
}
